<template>
  <div>
    <el-row>
      <el-col :span="24" style="margin-bottom: 20px">
        <span>{{stationTitle}}</span>
        <span>通道：{{cameraId}}    </span>
        <el-button type="success" circle @click="controlCamera('up')">上</el-button>
        <el-button type="success" circle @click="controlCamera('down')">下</el-button>
        <el-button type="success" circle @click="controlCamera('left')">左</el-button>
        <el-button type="primary" circle @click="controlCamera('right')">右</el-button>
        <el-button type="primary" circle @click="controlCamera('stop')">停止</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="14" :offset="4">
        <video id="video" class="video-js vjs-default-skin" controls preload="auto">
          <source src="http://129.211.130.22:10001/hls/34020000001110000851_0200000851/34020000001110000851_0200000851_live.m3u8" type="application/x-mpegURL">
        </video>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'cameraManager',
  components: {},
  data () {
    return {
      stationTitle: '修文电站',
      cameraId: '34020000001110000851',
      time: [],
      videoSrc: '',
      imgSrc: '',
      layer: null
    }
  },
  created () {
    this.initVideoSrc()
  },
  mounted () {
    this.playerVideo('video')
  },
  methods: {
    initVideoSrc () {
      this.$axios.get('/api/v1/stream/start', {
        params: {
          serial: this.cameraId
        }
      })
        .then(response => {
          this.videoSrc = response.RTMP
        })
    },
    // 视频播放
    playerVideo (id) {
      this.layer = this.$video(id, {}, function onPlayerReady () {
        this.play()
        this.on('ended', function () {
          console.log('Awww...over so soon?!')
        })
      })
    },
    // 摄像有控制
    controlCamera (command) {
      this.$axios.get('/api/v1/ptz/control', {
        params: {
          serial: this.cameraId,
          command: command
        }
      })
        .then(response => {
          console.log(response)
        })
    }
  },
  destroyed () {
    this.layer.dispose()
  }
}
</script>
<style lang="less">
  #video {
    height: 500px;
    width: 800px;
  }
</style>
